<template>
  <basic-container>
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div
        class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
        @click="goBack"
      >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content">交易详情</div>
    </div>
    <!-- END goBack -->
    <section class="haruyuki-bg-color-white">
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-s-order"></i
          ><span class="haruyuki-ml-6">交易订单</span>
        </div>
        <div v-if="payInfo.rptPayState == 1">
          <el-button
            type="primary"
            icon="el-icon-user"
            size="small"
            v-if="refundOn"
            @click="getRefund()"
            >退 款</el-button
          >
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <span class="wordBreak">商户名：<span class="haruyuki-color-primaryblue">{{ tradeInfo.rpiName }}</span></span>
          </el-col>
          <el-col :span="6">
            <span class="wordBreak">商户号：{{ tradeInfo.rpiNo }}</span>
          </el-col>
          <el-col :span="6">
            <span class="wordBreak">交易终端号：{{ tradeInfo.rtNo }}</span>
          </el-col>
          <el-col :span="6">
            <span class="wordBreak">交易订单号：{{ tradeInfo.rptOrderCode }}</span>
          </el-col>
          <el-col :span="6">
            <span class="wordBreak">通道订单号：{{ tradeInfo.rptAisleOrderCode }}</span>
          </el-col>
          <el-col :span="6">
            <span class="wordBreak">终端流水号：{{ tradeInfo.rptRtNo }}</span>
          </el-col>
          <el-col :span="6">
            <span  class="wordBreak">{{ formatVal(payInfo.rpsCustTypeName) }}单号：{{ tradeInfo.rptOtherPayCode}}</span>
          </el-col>
          <el-col :span="6" v-if="tradeInfo.attach">
            <span class="wordBreak">附加数据：{{ tradeInfo.attach }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="haruyuki-title haruyuki-size-16">
        <i class="el-icon-postcard"></i><span class="haruyuki-ml-6">支付信息</span>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <span class="wordBreak">支付方式：{{ payInfo.rpsCustTypeName }}</span>
          </el-col>
          <!-- <el-col :span="6">
            <span class="wordBreak">支付类型： {{ payInfo.rptPayModelName }}</span>
          </el-col> -->
          <el-col :span="6">
            <span class="wordBreak">支付状态：<span class="haruyuki-color-primaryblue">{{ payInfo.rptPayStateName }}</span>
              <span class="haruyuki-color-silverGray" v-show="exhibition(payInfo.rptIsRefund) != 0 && payInfo.rptPayStateName == '支付成功'">(已退款)</span>
            </span>
          </el-col>
          <el-col :span="6">
            <span  class="wordBreak">交易金额：{{ payInfo.rptAmount }}元</span>
          </el-col>
          <el-col :span="6">
            <span class="wordBreak">手续费：{{ payInfo.rptFee }}</span>
          </el-col>
          <el-col :span="6">
            <span class="wordBreak">商家实收金额：{{ payInfo.rptActualAmount }}元</span>
          </el-col>
          <el-col :span="6">
            <span class="wordBreak">买家实付金额：{{ payInfo.rptAmount }}元</span>
          </el-col>
          <!-- <el-col :span="6">
            <span class="wordBreak">商家优惠金额：{{payInfo.discountAmount}}元</span>
          </el-col>
           <el-col :span="6">
            <span class="wordBreak">平台优惠金额：{{payInfo.platformDiscountAmount}}元</span>
          </el-col> -->
          <el-col :span="6">
            <span class="wordBreak">通道类型：{{ payInfo.aisleName }}</span>
          </el-col>
          <el-col :span="6">
            <span class="wordBreak">{{ formatVal(payInfo.rpsCustTypeName) }}用户标识：{{ payInfo.rpsCustId }}</span>
          </el-col>
          <!-- <el-col :span="6">
            <span class="wordBreak">是否推送：{{payInfo.rptNoticeStatus}}</span>
          </el-col> -->
        </el-row>
      </div>
      <div class="haruyuki-title haruyuki-size-16">
        <i class="el-icon-time"></i><span class="haruyuki-ml-6">时间列表</span>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="6">
            <span class="wordBreak">终端交易时间：{{ dateInfo.rptPayTime }}</span>
          </el-col>
          <el-col :span="6">
            <span class="wordBreak">订单创建时间：{{ dateInfo.createTime }}</span>
          </el-col>
          <el-col :span="6">
            <span class="wordBreak">支付完成时间：{{ dateInfo.rptPayTrueTime }}</span>
          </el-col>
          <el-col :span="6">
            <span class="wordBreak">结算处理时间：{{ dateInfo.settlementDealTime }}</span>
          </el-col>
        </el-row>
      </div>
      <div v-if="refundType(payInfo.rptPayStateName, payInfo.rptIsRefund)">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-postcard"></i><span class="haruyuki-ml-6">退款信息</span>
        </div>
        <!-- 表格 -->
        <div class="haruyuki-content" v-show='payInfo.rptPayStateName == "支付成功"&&this.exhibition(payInfo.rptIsRefund) != 0' >
          <el-row :gutter="20">
            <avue-crud
              :option="option"
              :data="refundList"
              ref="crud"
              @current-change="currentChange"
              @size-change="sizeChange"
              @refresh-change="refreshChange"
            >
              <template slot-scope="{row}" slot="rptPayStateName">
                <div>
                  <el-tag type="success" :color="rptPayStateType(row)" effect="dark">{{row.rptPayStateName}}</el-tag>
                </div>
              </template>
            </avue-crud>
          </el-row>
        </div>
        <!-- 文本展示 -->
        <div class="haruyuki-content" v-show='!(payInfo.rptPayStateName == "支付成功"&&this.exhibition(payInfo.rptIsRefund) != 0)' >
          <el-row :gutter="20">
            <el-col :span="6">
              <span class="wordBreak">退款处理单号：{{ refundList[0].refundOrderCode }}</span>
            </el-col>
            <el-col :span="6">
              <span class="wordBreak">退款金额：{{ refundList[0].rptRefundAmount }}</span>
            </el-col>
            <el-col :span="6">
              <span class="wordBreak">退款状态：{{ refundList[0].rptPayStateName }}</span>
            </el-col>
            <el-col :span="6">
              <span class="wordBreak">退款时间：{{ refundList[0].rptPayTrueTime }}</span>
            </el-col>
            <el-col :span="24">
              <span class="wordBreak">备注：{{ refundList[0].remark }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </section>
    <el-dialog
      title="退款"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogRefundVisible"
    >
      <avue-form ref="serveForm" :option="refundOption" v-model="refundForm" @submit="refundSubmit"></avue-form>
    </el-dialog>
  </basic-container>
</template>
<script>
import { getInfoDetail, refundOrder } from "@/api/rb-core/dealManagement/dealManagement";

export default {
  data() {
    return {
      rptAisleOrderCode: "",
      tradeInfo: {}, //交易信息
      payInfo: {}, //支付信息
      dateInfo: {}, //支付时间
      refundList: [], //退款记录
      dialogRefundVisible: false, //退款 dialog
      refundOn: false,
      available: 0,
      option: {
        // height: "calc(50vh - 50px)",
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        searchMenuSpan: 24,
        columnBtn: false,
        menu:false,
        refreshBtn:false,
        searchBtn:false,
        selectClearBtn:false,
        indexLabel:'序号',
        selection:false,
        column: [
           {
            label: "退款订单号",
            prop: "refundOrderCode",
            type: "input",
            overHidden: true
          },
           {
            label: "终端流水号",
            prop: "rptRtNo",
            type: "input",
            overHidden: true
          },
           {
            label: "商户名",
            prop: "rpiName",
            type: "input",
            width: 150,
            overHidden: true
          },
           {
            label: "商户号",
            prop: "rpiNo",
            type: "input",
            overHidden: true
          },
           {
            label: "交易门店",
            prop: "rpsName",
            type: "input",
            width: 150,
            overHidden: true
          },
           {
            label: "退款金额",
            prop: "rptRefundAmount",
            type: "input",
            width: 150,
            overHidden: true
          },
           {
            label: "退款时间",
            prop: "rptPayTrueTime",
            type: "input",
            width: 150,
            overHidden: true
          },
           {
            label: "支付方式",
            prop: "rpsCustTypeName",
            type: "input",
            width: 150,
            overHidden: true
          },
           {
            label: "退款状态",
            prop: "rptPayStateName",
            type: "input",
            width: 150,
            overHidden: true
          },
          {
            label: "备注",
            prop: "remark",
            type: "input",
            overHidden: true
          }
        ]
      },
      refundForm: {},
      refundOption: {
        // height: "calc(50vh - 50px)",
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        refreshBtn:false,
        column: [
           {
            label: "退款金额",
            prop: "refundAmount",
            type: "number",
            value: null,
            maxRows: "",
            minRows: "0",
            step: "1",
            precision: "2",
            dataType: 'number',
            rules: [
              {
                required: true,
                message: "请输入退款金额",
                trigger: "blur",
              },
            ],
          },
          {
            label: "退款理由",
            prop: "refundReason",
            type: "textarea",
            span: 24,
            minRows: 2,
            rules: [
              {
                required: true,
                message: "请输入退款理由",
                trigger: "blur",
              },
            ],
          },
        ]
      },
    };
  },
  computed: {
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
    formatVal() {
      return (val) => {
        if (val) {
          return val;
        } else {
          return "";
        }
      };
    },
    // 交易状态
    rptPayStateType() {
      return (row) => {
        if(row.rptPayState==0){
          return '#E6A23C' //未支付
        }else if(row.rptPayState==1&&row.rptIsRefund!==0){
          return '#6463bf' //支付成功（已退款）
        }else if(row.rptPayState==1){
          return '#67C23A' //支付成功
        }else if(row.rptPayState==2){
          return '#909399'    //支付失败
        }else if(row.rptPayState==3){
          return '#909399' //取消支付
        }else if(row.rptPayState==4){
          return '#909399' //退款中
        }else if(row.rptPayState==5){
          return '#2fdeebf2' //已退款
        }else if(row.rptPayState==6){
          return '#909399' //退款失败
        }else{
          return '#909399' 
        }
      };
    },
  },
  created() {
    this.infoData();
  },
  methods: {
    /* 退款 dialog */
    getRefund() {
      const column = this.findObject(this.refundOption.column, "refundAmount");
      column.value = this.available;
      column.maxRows = this.available;
      this.dialogRefundVisible = true;
    },
    /* 提交 退款金额 */
    refundSubmit(row, done, loading) {
      refundOrder({orderCode:this.tradeInfo.rptOrderCode, ...row}).then(
        () => {
          this.dialogRefundVisible = false;
          this.$message({
            type: "success",
            message: "退款成功!",
          });
          this.$refs.serveForm.resetForm();
          this.infoData();
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    /**
     * 显示退款信息
     * rptIsRefund 是否有退款（0否1部分退款2全部退款
     */
    refundType(rptPayStateName, rptIsRefund) {
      if (rptPayStateName == "退款失败" || rptPayStateName == "已退款" || (rptPayStateName == "支付成功"&&this.exhibition(rptIsRefund) != 0)) {
        return true;
      } else {
        return false;
      }
    },
    /* 页面加载 初始化请求详情接口 */
    infoData() {
      // const id = this.$route.query.id;
      // this.id = id;
      this.rptAisleOrderCode = this.$route.query.rptAisleOrderCode;
      getInfoDetail(this.rptAisleOrderCode).then((res) => {
        this.dateInfo = res.data.data.dateInfo;
        this.payInfo = res.data.data.payInfo;
        this.refundList = res.data.data.refundList;
        this.tradeInfo = res.data.data.tradeInfo;
        this.refundOn = res.data.data.refundOn;
        this.available = res.data.data.available;
      });
    },
    /* 返回页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.replace({ path: "/rb-core/dealManagement/dealManagement" });
    },
  },
};
</script>

<style lang="scss" scoped>
.picture-preview {
  color: #409eff;
  cursor: pointer;
}

.merchant-title {
  font-weight: bold;
}
.img-margin-r10 {
  margin-right: 10px;
}
/deep/ .avue-crud__menu{
  display: none !important;
}
.wordBreak{
  word-break: break-word;
}
</style>